<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Navs</h3>
</div>
<div class="p-md">
  <div class="row">
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Nav with sub</h5>
      <ul class="nav m-b-lg" ui-nav>
        <li class="active">
          <a href>
            <span class="pull-right label bg-info">NEW</span>
            Pages
          </a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
        <li>
          <a href class="auto">
            <span class="pull-right text-muted m-r-xs">
              <i class="fa fa-plus inline"></i>
              <i class="fa fa-minus none"></i>
            </span>
            Components
          </a>
          <ul class="nav nav-sub nav-sm">
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Arrow</a>
            </li>
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Button</a>
            </li>
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Colors</a>
            </li>
          </ul>
        </li>
        <li>
          <a href>
            <span class="pull-right badge bg-success">8</span>
            Mail
          </a>
        </li>
      </ul>
      <h5 class="no-margin m-b">Nav Pills</h5>
      <ul class="nav nav-pills m-b" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>Components <span class="badge bg-info">2</span></a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-sm nav-pills m-b" ui-nav>
        <li>
          <a href>Small</a>
        </li>
        <li class="active">
          <a href>Components <span class="badge bg-success badge-sm">2</span></a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-xs nav-pills m-b" ui-nav>
        <li>
          <a href>Nav xs</a>
        </li>
        <li>
          <a href>Components <span class="badge bg-success badge-xs">2</span></a>
        </li>
        <li class="active">
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-xxs nav-rounded nav-pills m-b-lg" ui-nav>
        <li class="active">
          <a href>Rounded</a>
        </li>
        <li>
          <a href>Components</a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <h5 class="no-margin m-b">Nav Tabs</h5>
      <ul class="nav nav-tabs" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>Components</a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <div class="p b-a no-b-t bg-white m-b"></div>
      <ul class="nav nav-sm nav-tabs" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>Components <span class="badge bg-warning badge-xs">5</span></a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <div class="p b-a no-b-t bg-white m-b"></div>
      <ul class="nav nav-tabs nav-justified" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>Components</a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <div class="p b-a no-b-t bg-white m-b"></div>
    </div>
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Nav in a bg-black div</h5>
      <div class="bg-black lt m-b-lg">
        <ul class="nav scroll-y" ui-nav>
          <li class="active">
            <a href>
              <span class="pull-right label bg-info">6</span>
              Pages
            </a>
          </li>
          <li>
            <a href>UI Kits</a>
          </li>
          <li>
            <a href class="auto">
              <span class="pull-right text-muted m-r-xs">
                <i class="fa fa-plus inline"></i>
                <i class="fa fa-minus none"></i>
              </span>
              Components
            </a>
            <ul class="nav nav-sub nav-sm bg">
              <li>
                <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Arrow</a>
              </li>
              <li>
                <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Button</a>
              </li>
              <li>
                <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Colors</a>
              </li>
            </ul>
          </li>
          <li>
            <a href>
              <span class="pull-right badge bg-success">8</span>
              Mail
            </a>
          </li>
        </ul>
      </div>
      <h5 class="no-margin m-b">Nav stacked</h5>
      <ul class="nav nav-pills nav-stacked m-b-lg" ui-nav>
        <li class="active">
          <a href>
            <span class="pull-right label bg-info">NEW</span>
            Pages
          </a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
        <li>
          <a href class="auto">
            <span class="pull-right text-muted m-r-xs">
              <i class="fa fa-plus inline"></i>
              <i class="fa fa-minus none"></i>
            </span>
            Components
          </a>
          <ul class="nav nav-sub nav-sm">
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Arrow</a>
            </li>
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Button</a>
            </li>
            <li>
              <a href><span class="fa fa-angle-right fa-fw text-muted"></span> Colors</a>
            </li>
          </ul>
        </li>
        <li>
          <a href>
            <span class="pull-right badge bg-success">8</span>
            Mail
          </a>
        </li>
      </ul>
      <h5 class="no-margin m-b">Nav Lines</h5>
      <ul class="nav nav-md nav-lines m-b b-b" ui-nav>
        <li class="active">
          <a href><span class="h3">Pages</span></a>
        </li>
        <li>
          <a href>
            <span class="h3">Components</span>
            <span class="badge bg-success up">2</span>
          </a>
        </li>
        <li>
          <a href><span class="h3">UI Kits</span></a>
        </li>
      </ul>
      <ul class="nav nav-lines m-b b-info" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>
            <span>Components</span>
            <span class="badge bg-info">2</span>
          </a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-lines nav-sm m-b b-success" ui-nav>
        <li>
          <a href>Pages</a>
        </li>
        <li class="active">
          <a href>
            <span>Components</span>
            <span class="badge badge-sm bg-success">2</span>
          </a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-lines nav-xs m-b b-primary" ui-nav>
        <li>
          <a href>Pages</a>
        </li>
        <li>
          <a href>
            <span>Components</span>
            <span class="badge badge-xs bg-primary">2</span>
          </a>
        </li>
        <li class="active">
          <a href>UI Kits</a>
        </li>
      </ul>
    </div>
  </div>
</div>